/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- 房间密码锁遮罩 -->
		<view class="passwordshow" v-if="password_lock">
			<input type="password" placeholder="请输入密码" @input="passwordChanged" />
			<button type="primary" @click="checkpassword">确认</button>
		</view>
		<!-- 直播 -->
		<view class="zhibo">
			<image :src="zhiboInfo.zbinfo.thumb" mode="aspectFill"></image>
		</view>
		<!-- 详情、互动、课件 -->
		<view class="qiehuan-part">
<!-- 			<view class="qiehuan-part-title">
				<view class="qiehuan-part-title-item" v-for="(item, index) in kechengList" :key="index">
					<view @click="muluchange(index)" :class="{btna:btnnum == index}">{{item}}</view>
					<text :class="{_underline: btnnum == index}"></text>
				</view>
			</view> -->
			
			<view class="remind" v-if="zhiboInfo.zbinfo.state==0">
				<image src="../../static/tixing.png" mode="aspectFit"></image>
				<text>直播时间：{{zhiboInfo.zbinfo.zbtime}}</text>
<!-- 				<text @click="postLiveKbtx" v-if="zhiboInfo.is_tx==0">开启</text>
				<text style="background-color: #2196f3;" v-else>已开启</text> -->
			</view>
			<view class="qiehuan-part-content">
				
				<!-- 详情 -->
				<view class="details" :class="{dis:btnnum == 0}" :model="zhiboInfo">
					<view class="details-course">
						
						<view class="details-course-top">
							<image src="../../static/kechengjiangshi.png" mode="aspectFit"></image>
							<text>课程介绍</text>
						</view>
						<view class="details-course-bottom">
							<view>课程：{{zhiboInfo.zbinfo.zbtitle}}</view>
							<image :src="zhiboInfo.zbinfo.thumb" mode="aspectFit"></image>
							<view>简介：{{zbjianjie}}</view>
						</view>
					</view>
					<view class="details-tutor">
						<view class="details-tutor-top" >
							<image src="../../static/kechengjianjie.png" mode="aspectFit"></image>
							<text>讲师介绍</text>
						</view>
						<view class="details-tutor-info" @click="navigate('tutor-introduced',zhiboInfo.zbinfo.tid)">
							<view class="details-tutor-info-right">
								<text>讲师主页</text>
							</view>
						</view>
					</view>
					<view class="details-tutor-bottom">
						<jyf-parser :html="introduce" ></jyf-parser>
					</view>

				</view>
			</view>
			<view class="gkbtn">
				<button type="primary" @click="golive" v-if="zhiboInfo.is_tx==0">{{zhiboInfo.zbinfo.is_bm == 1?'报名':''}}观看直播</button>
				<button type="warn" @click="golive" v-else>已报名观看直播</button>
			</view>
			<view v-if="is_bm" class="baoming">
				<view class="item">
					<span>姓名</span>
					<input type="text" v-model="addressForm.realname" placeholder="姓名将显示为结业证书名字,请填写真实姓名">
				</view>
				<view class="item">
					<span>性别</span>
					<input type="text" v-model="addressForm.sex" placeholder="请填写男或女">
				</view>
				<view class="item">
					<span>手机号</span>
					<input type="text" v-model="addressForm.phone" placeholder="手机号将关联你的账号,请仔细核对">
				</view>
				<view class="item" @click="openLevel" style="color: #555;">
					<span style='color: #fff;'>选择省市区</span>
					<!-- <input class="name" @click="openLevel"  disabled placeholder="*请选择省市区" v-if="addressForm.shengshiqu==''" /> -->
					<input class="name"  v-model="addressForm.shengshiqu" disabled="true" />
					<w-picker
						:visible.sync="visible"
						mode="region"
						default-type="id"
						:default-props="defaultProps1"
						@confirm="onConfirm($event,'region')"
						@cancel="onCancel"
						ref="region"
					></w-picker>
				</view>
				<view class="item">
					<span>单位名称</span>
					<input type="text" v-model="addressForm.danwei" placeholder="请填写全称">
				</view>
				<view class="item">
					<button type="primary" @click="preserve">立即报名</button>
				</view>
				<view class="item" @click="closebm" style="margin-top: 20upx;">
					<image src="../../static/close.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkUserinfo } from '@/request/checkUserinfo';
	import wPicker from "@/components/w-picker/w-picker.vue";
	import { postLiveDetail, postLiveKbtx } from '@/request/zhibo.js';
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	let socketTask;
	export default {
		components:{
			jyfParser,
			wPicker,
		},
		data() {
			return {
				kechengList: ['课程详情'],
				btnnum: 0,
				courseWare: [],
				zhiboInfo: {},
				HOST_URL:uni.HOST_URL,
				issocketOpen: false,
				sendMessage: '',
				userinfo: '',
				msg_type:'say',
				zbid:'',
				messageList: [],
				lastmsgid:'',
				zbjianjie:'', // 详情中的直播简介
				introduce: '' ,// 详情中的讲师简介
				password_lock:false,
				inputPassword:'',
				allusers:[],
				usersshow:false,
				files:[],//课件
				video_controls:true,
				is_bm:false,
				visible:false,
				addressForm: {
					realname: '', // 收件人
					sex:'',
					phone: '', // 收件人电话
					shengshiqu: '',
					danwei:'',
				},
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad(option) {
			console.log('携带参数',option);
			//#ifdef MP
			const BASE_URL = uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/set/base_set',
				method:'GET',
				success:(res) =>{
					console.log(res.data);
					let set=res.data.data
					if(set.smallapp){
						if(set.smallapp.is_sh==1){
							uni.setNavigationBarTitle({
							    title: '课程学习'
							});
						}else{
							uni.setNavigationBarTitle({
							    title: '课程直播'
							});
						}
					}
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
			//#endif
			this.zbid=option.id
			checkUserinfo()
			let userinfo = uni.getStorageSync('userinfo')
			this.userinfo = userinfo
			if(userinfo.uid){
				postLiveDetail({id: option.id, uid: userinfo.uid}).then(res => {
					console.log(res.data)
					this.zhiboInfo = res.data.data
					this.files = res.data.data.files
					this.zbjianjie = res.data.data.zbinfo.zbjianjie
					if(res.data.data.zbinfo.password!='' && res.data.data.zbinfo.password!=null){
						this.password_lock = true
					}
					this.introduce = res.data.data.tinfo.introduce
				})
			}
		},
		onUnload() {

		},
		onShow() {

		},
		methods: {
			// 保存信息
			preserve () {
				if(this.addressForm.realname==''){
					uni.showToast({
						title:'姓名不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.sex==''){
					uni.showToast({
						title:'性别不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.phone==''){
					uni.showToast({
						title:'手机号不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.shengshiqu==''){
					uni.showToast({
						title:'省市区不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.danwei==''){
					uni.showToast({
						title:'单位不能为空！',
						icon:'none'
					})
					return false
				}
				const userinfo_check = uni.getStorageSync('userinfo');
				let uid=userinfo_check.uid
				var data={
					uid:uid,
					liveid:this.zbid,
					realname:this.addressForm.realname,
					sex:this.addressForm.sex,
					phone:this.addressForm.phone,
					shengshiqu:this.addressForm.shengshiqu,
					danwei:this.addressForm.danwei,
				}
				const BASE_URL=uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/live/kbtx',
					data: data,
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						if(res.data.code=="0"){
							this.is_bm = false
							uni.showToast({
								title: res.data.msg,
								duration: 1500
							});
							
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon:'none'
							});
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			openLevel() {
				this.visible=true;
			},
			onCancel(){
				this.visible=false;
			},
			onConfirm(e) {
				this.addressForm.shengshiqu=e.result;

			},
			closebm(){
				this.is_bm = false
			},
			golive(){
				if(this.zhiboInfo.zbinfo.is_bm == 1){
					if(this.zhiboInfo.is_tx == 0){
						this.is_bm = true
					}else{
						uni.navigateTo({
							url: `/pages/broadcasting/broadcasting?id=${this.zbid}`
						});
					}
				}else{
					uni.navigateTo({
						url: `/pages/broadcasting/broadcasting?id=${this.zbid}`
					});
				}
			},
			download(url,type){
				// #ifndef H5
				uni.showLoading({
					title:'下载中...'
				})
				uni.downloadFile({
				    url: url,
				    success: (res) => {
				        if (res.statusCode === 200) {
								if(type==1){
									uni.previewImage({
									  urls: [res.tempFilePath],
									  longPressActions: {
										  itemList: ['发送给朋友', '保存图片', '收藏'],
										  success: function(data) {
											  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
										  },
										  fail: function(err) {
											  console.log(err.errMsg);
										  }
									  }
									});
								}else{
									uni.saveFile({
									  tempFilePath: res.tempFilePath,
									  success: (res)=> {
										  uni.hideLoading();
										  uni.showToast({
											title:'下载成功'
										  })
										  var savedFilePath = res.savedFilePath;
										  uni.showModal({
										      title: '文件保存地址为',
										      content: savedFilePath,
											  confirmText:'预览文件',
										      success: (res)=> {
										          if (res.confirm) {
													  uni.openDocument({
														filePath: savedFilePath,
														showMenu: true,
														success: (res)=> {
															console.log('打开文档成功');
														}
													  });
										          }
										      }
										  });
									  }
									});
								}
				        }else{
							uni.hideLoading();
							uni.showModal({
							    title: '下载报错原因:',
							    content: JSON.stringify(res),
							    success: (res)=> {
							        if (res.confirm) {
							        }
							    }
							});
						}
				    }
				});
				// #endif
				// #ifdef H5
				window.open(url);
				// #endif
			},
			usersshowclose(){
				this.usersshow=false
			},
			usersshowbtn(){
				this.usersshow=this.usersshow==true?false:true
			},
			passwordChanged(e){
				this.inputPassword = e.target.value;
			},
			checkpassword(){
				if(this.inputPassword ==''){
					uni.showToast({
						title:'密码不能为空',
						icon:'none'
					})
					return false
				}
				if(this.inputPassword == this.zhiboInfo.zbinfo.password){
					this.password_lock = false
				}else{
					uni.showToast({
						title:'密码不正确,请重试!',
						icon:'none'
					})
					return false
				}
			},
			navigate (e,tid) {
				uni.navigateTo({
					url: `/pages/teacher-center/${e}/${e}?tid=${tid}`
				});
			},
			// 开播提醒
			postLiveKbtx() {
				postLiveKbtx({uid: this.userinfo.uid, liveid: this.zbid}).then(res => {
					if(res.data.code == 0) {
						uni.showToast({
							title: '设置成功'
						})
						this.zhiboInfo.is_tx = 1
					}
				})
			},
			scrolltolower(){
				this.lastmsgid='msg'+(this.messageList.length-1)
			},
			scrollChange(e) {
				this.lastmsgid=''
			},
			changeMsg(e){
				this.sendMessage=e.detail.value
			},
			muluchange(e) {
				this.btnnum = e
			},
			statechange(e){
				console.log('live-player code:', e.detail.code)
			},
			error(e){
				console.error('live-player error:', e.detail.errMsg)
			},
			// 创建websocket链接
			connectSocketInit() {
				const WSS_URL = uni.WSS_URL
				uni.connectSocket({
					url: WSS_URL
				})
			},
			// 点击发送消息
			sendMsg(e) {
				if(uni.issocketOpen == false){
					uni.showToast({
						title:'请检查websocket连接',
						icon:'error'
					})
					return false;
				}
				var data = {
						uid: this.userinfo.uid,
						msg_type:this.msg_type,
						nickname: this.userinfo.userdata.nickname,
						avatar: encodeURIComponent(this.userinfo.userdata.avatar),
						live_type: 'course',
						zbid: this.zbid
					}
				if(e=='login'){
					if(this.issocketOpen) {
						data.msg_type='login'
						// #ifndef MP-TOUTIAO
						uni.sendSocketMessage({
							data: JSON.stringify(data),
							success: res => {
								console.log(res)
							}
						})
						// #endif
						// #ifdef MP-TOUTIAO
						socketTask.send({
							data: JSON.stringify(data),
							success: (res) => {
							  console.log("send success", res);
							}
						});
						// #endif
					}
				}else{
					if(this.msg_type=='say'){
						if(this.sendMessage==''){
							uni.showToast({
								title:'发送内容不能为空',
								icon:'none'
							})
							return false
						}else{
							data.send_msg=this.sendMessage
							if(this.issocketOpen) {
								// #ifndef MP-TOUTIAO
								uni.sendSocketMessage({
									data: JSON.stringify(data),
									success: res => {
										this.sendMessage=''
									}
								})
								// #endif
								// #ifdef MP-TOUTIAO
								socketTask.send({
									data: JSON.stringify(data),
									success: (res) => {
									  console.log("send success", res);
									  this.sendMessage='';
									}
								});
								// #endif
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.baoming{
		top:0;
		left:0;
		position: fixed;
		background: rgba(9,9,9,.9);
		z-index: 99999;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		.item{
			color: #fff;
			display: flex;
			height: 100rpx;
			span{
				width: 150rpx;
			}
			input{
				height: 60rpx;
				width: 500rpx;
				background-color: #fff;
				color: #555;
				padding: 0 5rpx;
			}
			button{
				display: flex;
				align-items: center;
			}
			image{
				width: 50upx;
				height: 50upx;
			}
		}
	}
	.gkbtn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		button{
			width: 200px;
		}
	}
.zhibo {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	width: 100%;
	height: 400upx;
	background-color: #000;
	.video {
		width: 750upx;
		height: 400upx;
	}
	image{
		width: 750upx;
		height: 400upx;
		}
}
	.userlist{
		border-radius: 8rpx;
		width: 50%;
		height: calc(100vh - 580upx);
		background-color: rgba(7,7,7,.6);
		position: fixed;
		padding: 0 10upx;
		left:0;
		bottom:80rpx;
		color: #fff;
		.closeusers{
			position: absolute;
			right: 10upx;
			top:10upx;
		}
		.totalnum{
			font-weight: 700;
			margin:15rpx 0;
			font-size: 32rpx;
		}
		.userinfo{
			padding: 5rpx;
			border-bottom: 1rpx solid #eee;
		}
	}
.passwordshow{
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: rgba(9,9,9,.9);
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	font-size: 30upx;
	input{
		margin-bottom: 20upx;
		background-color: #fff;
		color: #555;
		padding: 10rpx 15rpx;
		border-radius: 8rpx;
	}
}
// 直播
.qiehuan-part {
	&-title{
		height: 100upx;
		background-color: #fff;
		padding-top: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 20upx;
			view {
			font-size: 30upx;
			color: #575757;
			}
			.btna { // 需要追加到view上的class
				font-weight: 700;
				color: #131313;
			}
			._underline { // 需要追加到view下方的下划线class
				width: 70upx;
				height: 7upx;
				background-color: #2f77ff;
				border-radius: 5upx;
				margin-top: 15upx;
			}
		}
	}
	
	.remind {
		height: 60upx;
		background-color: #e8d1a6;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 40upx;
			height: 40upx;
		}
		text:nth-child(2) {
			font-size: 24upx;
			color: #333;
			margin-left: 10upx;
		}
		text:nth-child(3) {
			height: 40upx;
			font-size: 26upx;
			color: #fff;
			border-radius: 40upx;
			padding: 0 20upx;
			background-color: orange;
			line-height: 40upx;
			margin-left: 10upx;
		}
	}
	
	
	&-content {
		// 详情
		.details {
			padding: 0 20upx;
			background-color: #fff;
			display: none;
			&-course {
				background-color: #fff;
				
				&-top {
					height: 80upx;
					display: flex;
					align-items: center;
					image {
						width: 50upx;
						height: 50upx;
					}
					text {
						font-size: 28upx;
						font-weight: 700;
						color: #333;
						margin-left: 10upx;
					}
				}
				&-bottom {
					display: flex;
					flex-direction: column;
					image {
						width: 100%;
					}
					text {
						font-size: 30upx;
						color: #333;
					}
				}
			}
			&-tutor {
				
				margin-top: 20upx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				&-top {
					height: 80upx;
					display: flex;
					align-items: center;
					image {
						width: 50upx;
						height: 50upx;
					}
					text {
						font-size: 30upx;
						font-weight: 700;
						color: #333;
						margin-left: 10upx;
					}
				}
				&-info {
					height: 80upx;
					padding: 0 20upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-left {
						display: flex;
						align-items: center;
						image {
							width: 50upx;
							height: 50upx;
							border-radius: 50%;
						}
						text {
							font-size: 30upx;
							color: #333;
							margin-left: 10upx;
						}
					}
					&-right {
						text {
							font-size: 28upx;
							color: #555;
						}
					}
				}
				&-bottom {
					margin-bottom: 100upx;
					padding: 0 20upx;
					display: flex;
					align-items: center;
					text {
						font-size: 28upx;
						color: #333;
					}
				}
			}
		}
		.send {
			width: 750upx;
			height: 80upx;
			padding: 0 30upx;
			box-sizing: border-box;
			border-top: 2upx solid #ddd;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			image{
				width: 50upx;
				height: 40upx;
				margin-left: 10upx;
				margin-right: 20upx;
			}
			input {
				border: 2upx solid #ddd;
				width: 400upx;
				height: 50upx;
				border-radius: 10upx;
			}
			button {
				height: 55upx;
				background-color: #07b35d;
				line-height: 55upx;
				font-size: 30upx;
				color: #fff;
				letter-spacing: 6upx;
			}
		}
		// 互动
		.interact {
			height: calc(100vh - 640upx);
			display: none;
			padding: 10upx 20upx;
			box-sizing: border-box;
			// background-color: orange;
			&-list {
				margin-bottom: 10upx;
				&-left {
					display: flex;
					.left {
						width: 70upx;
						height: 70upx;
						border-radius: 50%;
					}
					.left-info {
						margin-left: 20upx;
						text {
							font-size: 28upx;
							color: #a4a6a6;
						}
						.info-context {
							margin-top: 10upx;
							text {
								display: block;
								max-width: 480upx;
								font-size: 28upx;
								color: #333;
								background-color: #a5ec72;
								padding: 4upx 10upx;
								border-radius: 5upx;
							}
						}
					}
				}
				&-right {
					display: flex;
					justify-content: flex-end;
					.right-info {
							text-align: right;
							margin-right: 20upx;
							margin-top: 10upx;
							text {
								font-size: 28upx;
								color: #a4a6a6;
								position: relative;
								right: 0;
							}
							.info-context {
								margin-top: 10upx;
								text {
									display: block;
									max-width: 480upx;
									font-size: 28upx;
									color: #333;
									text-align: left;
									background-color: #e8e8e8;
									padding: 4upx 10upx;
									border-radius: 5upx;
								}
							}
						}
						.right {
							width: 70upx;
							height: 70upx;
							border-radius: 50%;
						}
					}
				}
		}
		.newinteract {
			height: calc(100vh - 580upx);
		}
		
		// 课件
		.kejian{
			display: none;
			text-align: center;
			background-color: #fff;
			&-list{
				.item{
					font-size: 25rpx;
					color: #555;
					letter-spacing: 5rpx;
					font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					display: flex;
					padding: 25rpx;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #eee;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					view{
						display: flex;
						align-items: center;
					}
				}
			}
			.nopl{
				width: 500upx;
			}
			.dis{
				display: block;
			}
		}
		.dis{
			display: block;
		}
	}
}
</style>
